feat: Remove calc in style (#228)

* feat: Move button model to near the button component file * chore: Format code * feat: Remove calc in style WIP * chore: Update text, anchore-text, button component Update those components responsibe
suzuka-kosen-festa · Sep 27, 2022 · 8d1f6db · 8d1f6db
1 parent 37afb16
commit 8d1f6db
Showing 19 changed files with 57 additions and 34 deletions.
diff --git a/src/components/atoms/anchor-text/__snapshots__/anchor-text.test.tsx.snap b/src/components/atoms/anchor-text/__snapshots__/anchor-text.test.tsx.snap
@@ -3,9 +3,8 @@
 exports[`(components) atoms/anchor > take snap shot 1`] = `
 <div>
   <a
-    class="css-vle9m6"
+    class="css-zld2jk"
     href="#"
-    role="link"
     tabindex="0"
   >
     This is test

diff --git a/src/components/atoms/anchor-text/anchor-text.stories.tsx b/src/components/atoms/anchor-text/anchor-text.stories.tsx
@@ -6,13 +6,26 @@ type Story = ComponentStoryObj<T>;
 
 const data = {
   link: "#",
-  role: "link",
   sentence: "This is test",
   tabindex: 0,
 };
 
 export default {
-  args: { children: data.sentence, href: data.link, role: data.role, tabIndex: data.tabindex },
+  args: { children: data.sentence, href: data.link, tabIndex: data.tabindex },
+  argTypes: {
+    children: {
+      description: "Context of anchor",
+      control: {
+        type: "text",
+      },
+    },
+    href: {
+      description: "Link of anchor",
+      control: {
+        type: "text",
+      },
+    },
+  },
   component: AnchorText,
 } as ComponentMeta<T>;
 

diff --git a/src/components/atoms/anchor-text/index.tsx b/src/components/atoms/anchor-text/index.tsx
@@ -1,5 +1,5 @@
 import tw from "twin.macro";
 
-const AnchorText = tw.a`font-zen text-white text-[calc(12px + 4 * ((100vw - 378px) / 1134))]`;
+const AnchorText = tw.a`font-zen text-xs sm:text-text text-base`;
 
 export { AnchorText };
diff --git a/src/components/atoms/button/__snapshots__/button.test.tsx.snap b/src/components/atoms/button/__snapshots__/button.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`(components) atoms/button > take anchor button's snap shot 1`] = `
 <div>
   <a
-    class="css-1a492j3"
+    class="css-104abqd"
     href="#"
     role="button"
     tabindex="0"
   >
     <p
-      class="css-hr6n41-Button"
+      class="css-oc644a-Button"
     >
       This is test
     </p>
@@ -20,11 +20,11 @@ exports[`(components) atoms/button > take anchor button's snap shot 1`] = `
 exports[`(components) atoms/button > take default button's snap shot 1`] = `
 <div>
   <button
-    class="css-1a492j3"
+    class="css-104abqd"
     tabindex="0"
   >
     <p
-      class="css-hr6n41-Button"
+      class="css-oc644a-Button"
     >
       This is test
     </p>

diff --git a/src/components/atoms/button/index.tsx b/src/components/atoms/button/index.tsx
@@ -1,8 +1,8 @@
 import tw from "twin.macro";
-import { ButtonProperties } from "../../../models";
+import { ButtonProperties } from "./type/model";
 import { Text } from "../text";
 
-const ButtonBox = tw.button`bg-white hover:bg-button-hover inline-block items-start px-8 py-2 gap-2.5 rounded-[2rem]`;
+const ButtonBox = tw.button`bg-white hover:bg-button-hover inline-block items-start px-2 py-0.5 sm:px-8 sm:py-2 gap-2.5 rounded-[2rem]`;
 
 const Button = <T extends AnyComponent>({
   children,

diff --git a/src/models/button.ts → src/components/atoms/button/type/model.ts b/src/models/button.ts → src/components/atoms/button/type/model.ts
@@ -1,6 +1,7 @@
 import type { CSSInterpolation } from "@emotion/serialize";
+import type { PropsWithChildren } from "react";
 
-export type ButtonProperties<T extends AnyComponent> = React.PropsWithChildren<
+export type ButtonProperties<T extends AnyComponent> = PropsWithChildren<
   PropertiesOf<T> & {
     boxStyles?: CSSInterpolation;
     textStyles?: CSSInterpolation;

diff --git a/src/components/atoms/text/__snapshots__/text.test.tsx.snap b/src/components/atoms/text/__snapshots__/text.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`(components) atoms/text > take snap shot 1`] = `
 <div>
   <p
-    class="css-1x10uum"
+    class="css-199inpx"
   >
     This is test
   </p>

diff --git a/src/components/atoms/text/index.tsx b/src/components/atoms/text/index.tsx
@@ -1,5 +1,5 @@
 import tw from "twin.macro";
 
-const Text = tw.p`font-zen text-white text-[calc(12px + 4 * ((100vw - 378px) / 1134))] select-none`;
+const Text = tw.p`font-zen text-text text-xs sm:text-base select-none`;
 
 export { Text };
diff --git a/src/components/atoms/text/text.stories.tsx b/src/components/atoms/text/text.stories.tsx
@@ -8,6 +8,17 @@ const data = {
   sentence: "This is test",
 };
 
-export default { args: { children: data.sentence }, component: Text } as ComponentMeta<T>;
+export default {
+  args: { children: data.sentence },
+  argTypes: {
+    children: {
+      description: "Context of text",
+      control: {
+        type: "text",
+      },
+    },
+  },
+  component: Text,
+} as ComponentMeta<T>;
 
 export const Default: Story = {};
diff --git a/src/components/molecules/twitter/__snapshots__/twitter.test.tsx.snap b/src/components/molecules/twitter/__snapshots__/twitter.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`(components) molecules/twitter > take snap shot 1`] = `
       class="css-g9iroc"
     >
       <a
-        class="twitter-timeline css-vle9m6"
+        class="twitter-timeline css-zld2jk"
         data-height="420"
         data-width="240"
         href="https://twitter.com/KOSENFESTA?ref_src=twsrc%5Etfw"
@@ -21,7 +21,7 @@ exports[`(components) molecules/twitter > take snap shot 1`] = `
       class="css-1uvl77q"
     >
       <a
-        class="twitter-timeline css-vle9m6"
+        class="twitter-timeline css-zld2jk"
         data-height="410"
         data-width="288"
         href="https://twitter.com/KOSENFESTA?ref_src=twsrc%5Etfw"

diff --git a/src/components/organisms/about-section/__snapshots__/about-section.test.tsx.snap b/src/components/organisms/about-section/__snapshots__/about-section.test.tsx.snap
@@ -12,20 +12,20 @@ exports[`(components) organisms/about-section > take snap shot 1`] = `
       鈴鹿高専について
     </h1>
     <p
-      class="css-1x10uum"
+      class="css-199inpx"
     >
       鈴鹿高専については本校ホームページをご覧ください。
     </p>
     <a
-      class="css-1a492j3"
+      class="css-104abqd"
       href="#"
       rel="noopener noreferrer"
       role="button"
       tabindex="0"
       target="_brank"
     >
       <p
-        class="css-hr6n41-Button"
+        class="css-oc644a-Button"
       >
         鈴鹿高専ホームページ
       </p>

diff --git a/src/components/organisms/contact-section/__snapshots__/contact-section.test.tsx.snap b/src/components/organisms/contact-section/__snapshots__/contact-section.test.tsx.snap
@@ -12,20 +12,20 @@ exports[`(components) organisms/contact-section > take snap shot 1`] = `
       お問い合わせ
     </h1>
     <p
-      class="css-1x10uum"
+      class="css-199inpx"
     >
       第57回鈴鹿高専祭に関するお問い合わせは下のボタンからお願いいたします。(google formsが開きます)
     </p>
     <a
-      class="css-1a492j3"
+      class="css-104abqd"
       href="#"
       rel="noopener noreferrer"
       role="button"
       tabindex="0"
       target="_blank"
     >
       <p
-        class="css-hr6n41-Button"
+        class="css-oc644a-Button"
       >
         お問い合わせ
       </p>

diff --git a/src/components/organisms/festa-section/__snapshots__/festa-section.test.tsx.snap b/src/components/organisms/festa-section/__snapshots__/festa-section.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`(components) organisms/festa-section > take snap shot 1`] = `
       今年のテーマ「Re:ROAD」について
     </h1>
     <p
-      class="css-ptd24m-FestaSection"
+      class="css-19xv45d-FestaSection"
     >
       第57回鈴鹿高専祭、テーマは「Re:ROAD」
 今回のテーマ「Re:ROAD」には「道（Road）」を創り直す（Re）という意味と、「弾をこめる・再補填する（Reload）」という意味を使い、「今年の準備をする」「来年以降、これから先のための高専祭を行う」という想いが込められています。

diff --git a/src/components/organisms/footer/__snapshots__/footer.test.tsx.snap b/src/components/organisms/footer/__snapshots__/footer.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`(components) organisms/footer > take snap shot 1`] = `
     role="contentinfo"
   >
     <a
-      class="css-vle9m6"
+      class="css-zld2jk"
       href="#"
       rel="noopener noreferrer"
       role="link"

diff --git a/src/components/organisms/hero-section/__snapshots__/hero-section.test.tsx.snap b/src/components/organisms/hero-section/__snapshots__/hero-section.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`(components) organisms/hero-section > take snap shot 1`] = `
       class="css-bg20hz-HeroSection"
     >
       <p
-        class="css-c6teuq-HeroSection"
+        class="css-19ggdn4-HeroSection"
       >
         第57回鈴鹿高専祭
       </p>
@@ -21,7 +21,7 @@ exports[`(components) organisms/hero-section > take snap shot 1`] = `
         width="1212"
       />
       <p
-        class="css-c6teuq-HeroSection"
+        class="css-19ggdn4-HeroSection"
       >
         2022.10.30-31
       </p>

diff --git a/src/components/organisms/map-section/__snapshots__/map-section.test.tsx.snap b/src/components/organisms/map-section/__snapshots__/map-section.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`(components) organisms/map-section > take snap shot 1`] = `
       class="css-rwuboe"
     >
       <p
-        class="css-1socv45-MapSection"
+        class="css-4xxnh5-MapSection"
       >
         〒
         510-0294 三重県鈴鹿市白子町

diff --git a/src/components/organisms/sponsor-section/__snapshots__/sponsor-section.test.tsx.snap b/src/components/organisms/sponsor-section/__snapshots__/sponsor-section.test.tsx.snap
@@ -12,14 +12,14 @@ exports[`(components) organisms/sponsor-section > take snap shot 1`] = `
       協賛企業
     </h1>
     <p
-      class="css-gm051n-SponsorSection"
+      class="css-5i9vob-SponsorSection"
     >
       今年の高専祭は3年ぶりの開催。
 以下の企業様が鈴鹿高専祭を応援してくれています！
     </p>
     <ul>
       <li
-        class="css-s718ez-SponsorSection"
+        class="css-12w83hw-SponsorSection"
       >
         株式会社xx
       </li>

diff --git a/src/components/templates/layout/__snapshots__/layout.test.tsx.snap b/src/components/templates/layout/__snapshots__/layout.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`(components) templates/layout > take snap shot 1`] = `
           class="css-bg20hz-HeroSection"
         >
           <p
-            class="css-c6teuq-HeroSection"
+            class="css-19ggdn4-HeroSection"
           >
             第57回鈴鹿高専祭
           </p>
@@ -27,7 +27,7 @@ exports[`(components) templates/layout > take snap shot 1`] = `
             width="1212"
           />
           <p
-            class="css-c6teuq-HeroSection"
+            class="css-19ggdn4-HeroSection"
           >
             2022.10.30-31
           </p>
@@ -43,7 +43,7 @@ exports[`(components) templates/layout > take snap shot 1`] = `
         role="contentinfo"
       >
         <a
-          class="css-vle9m6"
+          class="css-zld2jk"
           href="https://github.com/suzuka-kosen-festa/2022-HP/blob/main/LICENSE"
           rel="noopener noreferrer"
           role="link"

diff --git a/src/models/index.ts b/src/models/index.ts
@@ -1,5 +1,4 @@
 export * from "./about-section";
-export * from "./button";
 export * from "./contact-section";
 export * from "./festa-section";
 export * from "./footer";