refactor(accordion): ♻️ change css classname lettercase

adaptui · Sep 16, 2020 · 8b65c23 · 8b65c23
1 parent 3bf0079
commit 8b65c23
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 32 deletions.
diff --git a/src/accordion/AccordionPanel.ts b/src/accordion/AccordionPanel.ts
@@ -41,7 +41,7 @@ export const useAccordionPanel = createHook<
 
     return {
       role: "region",
-      "aria-labelledby": `${buttonId ? buttonId : undefined}`,
+      "aria-labelledby": buttonId ?? buttonId,
       ref: useForkRef(ref, htmlRef),
       hidden: !isOpen,
       ...htmlProps,

diff --git a/src/accordion/stories/Accordion.stories.tsx b/src/accordion/stories/Accordion.stories.tsx
@@ -84,17 +84,17 @@ export const Styled = () => {
   const props = useAccordionState({ allowMultiple: false });
 
   return (
-    <div id="accordionGroup" className="Accordion">
+    <div id="accordionGroup" className="accordion">
       <AccordionItem {...props}>
         <h3>
-          <AccordionTrigger {...props} className="Accordion-trigger">
-            <span className="Accordion-title">
+          <AccordionTrigger {...props} className="accordion-trigger">
+            <span className="accordion-title">
               Personal Information
-              <span className="Accordion-icon"></span>
+              <span className="accordion-icon"></span>
             </span>
           </AccordionTrigger>
         </h3>
-        <AccordionPanel {...props} className="Accordion-panel">
+        <AccordionPanel {...props} className="accordion-panel">
           <div>
             <fieldset>
               <p>
@@ -144,14 +144,14 @@ export const Styled = () => {
       </AccordionItem>
       <AccordionItem {...props}>
         <h3>
-          <AccordionTrigger {...props} className="Accordion-trigger">
-            <span className="Accordion-title">
+          <AccordionTrigger {...props} className="accordion-trigger">
+            <span className="accordion-title">
               Billing Address
-              <span className="Accordion-icon"></span>
+              <span className="accordion-icon"></span>
             </span>
           </AccordionTrigger>
         </h3>
-        <AccordionPanel {...props} className="Accordion-panel">
+        <AccordionPanel {...props} className="accordion-panel">
           <div>
             <fieldset>
               <p>
@@ -180,14 +180,14 @@ export const Styled = () => {
       </AccordionItem>
       <AccordionItem {...props}>
         <h3>
-          <AccordionTrigger {...props} className="Accordion-trigger">
-            <span className="Accordion-title">
+          <AccordionTrigger {...props} className="accordion-trigger">
+            <span className="accordion-title">
               Shipping Address
-              <span className="Accordion-icon"></span>
+              <span className="accordion-icon"></span>
             </span>
           </AccordionTrigger>
         </h3>
-        <AccordionPanel {...props} className="Accordion-panel">
+        <AccordionPanel {...props} className="accordion-panel">
           <div>
             <fieldset>
               <p>

diff --git a/src/accordion/stories/index.css b/src/accordion/stories/index.css
@@ -1,29 +1,29 @@
-.Accordion {
+.accordion {
   margin: 0;
   padding: 0;
   border: 2px solid hsl(0, 0%, 52%);
   border-radius: 7px;
   width: 20em;
 }
 
-.Accordion h3 {
+.accordion h3 {
   margin: 0;
   padding: 0;
 }
 
-.Accordion.focus {
+.accordion.focus {
   border-color: hsl(216, 94%, 43%);
 }
 
-.Accordion.focus h3 {
+.accordion.focus h3 {
   background-color: hsl(0, 0%, 97%);
 }
 
-.Accordion > * + * {
+.accordion > * + * {
   border-top: 1px solid hsl(0, 0%, 52%);
 }
 
-.Accordion-trigger {
+.accordion-trigger {
   background: none;
   color: hsl(0, 0%, 13%);
   display: block;
@@ -37,20 +37,20 @@
   outline: none;
 }
 
-.Accordion-trigger:focus,
-.Accordion-trigger:hover {
+.accordion-trigger:focus,
+.accordion-trigger:hover {
   background: hsl(216, 94%, 94%);
 }
 
-.Accordion-trigger:focus {
+.accordion-trigger:focus {
   outline: 4px solid transparent;
 }
 
-.Accordion *:first-child .Accordion-trigger {
+.accordion *:first-child .accordion-trigger {
   border-radius: 5px 5px 0 0;
 }
 
-.Accordion-title {
+.accordion-title {
   display: block;
   pointer-events: none;
   border: transparent 2px solid;
@@ -59,11 +59,11 @@
   outline: none;
 }
 
-.Accordion-trigger:focus .Accordion-title {
+.accordion-trigger:focus .accordion-title {
   border-color: hsl(216, 94%, 43%);
 }
 
-.Accordion-icon {
+.accordion-icon {
   border: solid currentColor;
   border-width: 0 2px 2px 0;
   height: 0.5rem;
@@ -75,22 +75,22 @@
   width: 0.5rem;
 }
 
-.Accordion-trigger:focus .Accordion-icon,
-.Accordion-trigger:hover .Accordion-icon {
+.accordion-trigger:focus .accordion-icon,
+.accordion-trigger:hover .accordion-icon {
   border-color: hsl(216, 94%, 43%);
 }
 
-.Accordion-trigger[aria-expanded="true"] .Accordion-icon {
+.accordion-trigger[aria-expanded="true"] .accordion-icon {
   transform: translateY(-50%) rotate(-135deg);
 }
 
-.Accordion-panel {
+.accordion-panel {
   margin: 0;
   padding: 1em 1.5em;
 }
 
 /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
-.Accordion-panel[hidden] {
+.accordion-panel[hidden] {
   display: none;
 }