@nuskin/foundation-ui-components 1.0.0-cft-35.1 → 1.0.0-cft-35.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/package.json +1 -1
  2. package/src/common/brand-components/Brand.stories.tsx +28 -0
  3. package/src/common/brand-components/BrandComponent.tsx +29 -0
  4. package/src/common/brand-components/BrandContanier.styled.tsx +10 -0
  5. package/src/common/brand-components/icons/NSLogoHorizontal.tsx +65 -0
  6. package/src/common/brand-components/icons/NSLogoMark.tsx +36 -0
  7. package/src/common/brand-components/icons/NSLogoPoweredBy.tsx +101 -0
  8. package/src/common/brand-components/icons/NSLogoStacked.tsx +55 -0
  9. package/src/common/brand-components/icons/NSWordMark.tsx +58 -0
  10. package/src/common/brand-components/index.ts +2 -0
  11. package/src/common/brand-components/types.d.ts +9 -0
  12. package/src/common/index.ts +5 -1
  13. package/src/common/typography/Typography.stories.tsx +27 -0
  14. package/src/common/typography/Typography.styled.tsx +45 -0
  15. package/src/common/typography/Typography.tsx +25 -0
  16. package/src/common/typography/index.ts +2 -0
  17. package/src/common/typography/types.d.ts +25 -0
  18. package/src/common/Icons/Logo.tsx +0 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuskin/foundation-ui-components",
3
- "version": "1.0.0-cft-35.1",
3
+ "version": "1.0.0-cft-35.2",
4
4
  "description": "It is a foundation library written in react, that provides commom components to all UI pages",
5
5
  "private": false,
6
6
  "main": "src/common/index.ts",
package/src/common/brand-components/Brand.stories.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import React from "react";
2
+ import { ComponentStory, ComponentMeta } from "@storybook/react";
3
+ import { BrandComponent } from "./BrandComponent";
4
+
5
+ export default {
6
+ title: "Components/Brand",
7
+ component: BrandComponent,
8
+ decorators: [
9
+ (story) => (
10
+ <div style={{ textAlign: "center", marginTop: "20px" }}>{story()}</div>
11
+ ),
12
+ ],
13
+ argTypes: {
14
+ size: { control: "text", defaultValue: "100px" },
15
+ variant: {
16
+ control: "select",
17
+ options: ["stacked", "horizontal", "logomark", "wordmark", "poweredBy"],
18
+ },
19
+ },
20
+ args: {
21
+ size: "100px",
22
+ variant: "stacked",
23
+ },
24
+ } as ComponentMeta<typeof BrandComponent>;
25
+
26
+ export const Brand: ComponentStory<typeof BrandComponent> = (args) => (
27
+ <BrandComponent {...args} />
28
+ );
package/src/common/brand-components/BrandComponent.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import React, { FC } from "react";
2
+ import NSLogoHorizontal from "./icons/NSLogoHorizontal";
3
+ import NSLogoMark from "./icons/NSLogoMark";
4
+ import NSLogoPoweredBy from "./icons/NSLogoPoweredBy";
5
+ import NSLogoStacked from "./icons/NSLogoStacked";
6
+ import NSLogoWordMark from "./icons/NSWordMark";
7
+ import LogoContainer from "./BrandContanier.styled";
8
+ import { BrandComponentProps } from "./types";
9
+
10
+ export const BrandComponent: FC<BrandComponentProps> = (props) => {
11
+ const { variant = "stacked", size = "108px" } = props;
12
+ const renderIcon = () => {
13
+ switch (variant) {
14
+ case "stacked":
15
+ return <NSLogoStacked color="primary" />;
16
+ case "horizontal":
17
+ return <NSLogoHorizontal color="primary" />;
18
+ case "wordmark":
19
+ return <NSLogoWordMark color="primary" />;
20
+ case "logomark":
21
+ return <NSLogoMark color="primary" />;
22
+ case "poweredBy":
23
+ return <NSLogoPoweredBy color="primary" />;
24
+ default:
25
+ return <NSLogoStacked color="primary" />;
26
+ }
27
+ };
28
+ return <LogoContainer size={size}>{renderIcon()}</LogoContainer>;
29
+ };
package/src/common/brand-components/BrandContanier.styled.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import { styled } from "@nuskin/foundation-theme";
2
+
3
+ const BrandContainer = styled.div<{ size: string }>`
4
+ svg {
5
+ font-size: ${({ size }) => size};
6
+ height: auto;
7
+ }
8
+ `;
9
+
10
+ export default BrandContainer;
package/src/common/brand-components/icons/NSLogoHorizontal.tsx ADDED
@@ -0,0 +1,65 @@
1
+ /* eslint-disable max-len */
2
+
3
+ import { SvgIconProps, SvgIcon } from "@mui/material";
4
+
5
+ const NSLogoHorizontal = (props: SvgIconProps) => {
6
+ return (
7
+ <SvgIcon
8
+ viewBox="0 0 135 30"
9
+ fill="none"
10
+ xmlns="http://www.w3.org/2000/svg"
11
+ {...props}
12
+ >
13
+ <path
14
+ fill-rule="evenodd"
15
+ clip-rule="evenodd"
16
+ d="M133.439 23C132.607 23 131.905 23.7014 131.905 24.5C131.905 25.3004 132.607 26 133.439 26C134.349 26 135 25.3004 135 24.5C135 23.6516 134.349 23 133.439 23ZM133.439 25.8255C132.686 25.8255 132.06 25.1996 132.06 24.5C132.06 23.7765 132.686 23.1762 133.439 23.1762C134.219 23.1762 134.792 23.7765 134.792 24.5C134.792 25.1996 134.219 25.8255 133.439 25.8255ZM134.061 24.151C134.061 23.9766 133.959 23.6265 133.388 23.6265H132.892V25.3997H133.129V24.6252H133.518L133.854 25.3997H134.061L133.75 24.599C133.934 24.5751 134.061 24.3768 134.061 24.151ZM133.412 24.474H133.129V23.8248H133.464C133.698 23.8248 133.879 23.9014 133.879 24.151C133.879 24.3016 133.801 24.474 133.412 24.474Z"
17
+ fill={props.color}
18
+ />
19
+ <path
20
+ fill-rule="evenodd"
21
+ clip-rule="evenodd"
22
+ d="M51.181 25L38.4365 9.34704V24.7232H37V6.07549L37.3395 6L49.9798 21.4768V6.27702H51.4421V24.9497L51.181 25Z"
23
+ fill={props.color}
24
+ />
25
+ <path
26
+ fill-rule="evenodd"
27
+ clip-rule="evenodd"
28
+ d="M62.7499 25C58.2617 25 55.5685 22.4685 55.5685 17.9423V6H57.0471V17.9165C57.0471 21.7525 59.2912 23.696 62.7499 23.696C66.2087 23.696 68.5056 21.7014 68.5056 17.9165V6H70.0106V17.9423C70.0106 22.3406 67.1326 25 62.7499 25Z"
29
+ fill={props.color}
30
+ />
31
+ <path
32
+ fill-rule="evenodd"
33
+ clip-rule="evenodd"
34
+ d="M83.781 25C81.7507 25 79.9289 24.3475 78.2632 23.2933L78.966 22.0636C80.5016 23.0674 82.1934 23.7201 83.9109 23.7201C86.4353 23.7201 88.1273 22.1637 88.1273 20.1307C88.1273 17.9973 86.644 17.0685 83.9371 15.889C80.9961 14.634 79.2002 13.3287 79.2002 10.794C79.2002 8.13339 81.5165 6 84.9257 6C86.5914 6 88.101 6.52701 89.2202 7.2548L88.5176 8.43455C87.5545 7.78181 86.2274 7.27989 84.7959 7.27989C82.2452 7.27989 80.6578 8.78589 80.6578 10.6934C80.6578 12.6762 82.2714 13.6299 84.5877 14.6593C87.8668 16.0898 89.6106 17.3197 89.6106 19.955C89.6106 22.967 87.008 25 83.781 25Z"
35
+ fill={props.color}
36
+ />
37
+ <path
38
+ fill-rule="evenodd"
39
+ clip-rule="evenodd"
40
+ d="M104.227 25L95.1657 15.6169V25H93.7368V6H95.1657V14.8389L103.921 6H105.758L96.5441 15.2276L106.116 25H104.227Z"
41
+ fill={props.color}
42
+ />
43
+ <path
44
+ fill-rule="evenodd"
45
+ clip-rule="evenodd"
46
+ d="M109.211 25H110.552V6H109.211V25Z"
47
+ fill={props.color}
48
+ />
49
+ <path
50
+ fill-rule="evenodd"
51
+ clip-rule="evenodd"
52
+ d="M129.581 25L116.836 9.34704V24.7232H115.4V6.07549L115.74 6L128.379 21.4768V6.27702H129.842V24.9497L129.581 25Z"
53
+ fill={props.color}
54
+ />
55
+ <path
56
+ fill-rule="evenodd"
57
+ clip-rule="evenodd"
58
+ d="M23.3312 7.73077C23.3312 7.73077 26.0255 7.59615 28.0509 9.84615C28.7197 10.5962 29.3694 11.5577 29.7325 12.9038C28.7771 5.63461 22.5669 0 15.0382 0C7.52865 0 1.29935 5.63462 0.324829 12.9231C0.687886 11.5769 1.33757 10.6154 2.00636 9.86538C4.05094 7.61538 6.7261 7.75 6.7261 7.75C13.414 8.09615 13.4522 14.8654 13.4522 14.8654V29.7885C13.758 29.8269 14.0828 29.8462 14.4076 29.8654V13.9038C14.4076 11.7308 13.7388 9.61539 12.2293 8.11539C10.8535 6.73077 9.07642 5.96154 7.20381 5.92308C8.00636 4.51923 9.11464 3.34615 10.4331 2.51923C11.828 1.65385 13.414 1.19231 15.0382 1.19231C16.6624 1.19231 18.2675 1.65385 19.6624 2.51923C20.9809 3.34615 22.0892 4.51923 22.8917 5.92308C21.0191 5.96154 19.2229 6.73077 17.8471 8.11539C16.3376 9.61539 15.6497 11.7308 15.6497 13.9038V29.8269C15.9745 29.8077 16.2802 29.7885 16.6051 29.75V14.8462C16.6051 14.8462 16.6433 8.07692 23.3312 7.73077ZM22.0892 16.3462C21.0764 16.9808 20.0255 18.2692 20.0255 20.9231V28.9808C23.0064 27.9038 25.5478 25.9038 27.3057 23.3077C28.4713 21.4038 28.5095 19.9038 28.2229 18.8077C27.8025 17.4038 26.5223 15.6538 23.9427 15.7885C23.9427 15.7885 22.9299 15.8077 22.0892 16.3462ZM23.4841 11.0385C25.4904 11.0385 26.828 11.5769 27.7261 12.2885C28.4522 12.9231 30.5923 15.1538 29.1783 19.3462C29.1592 16.3269 28.4522 15.25 27.6688 14.3462C25.9872 12.5192 23.7516 12.7308 23.7516 12.7308C21.0955 12.8077 19.8535 14.1346 19.2802 15.3462C18.7452 16.4231 18.7834 17.3846 18.7834 17.3846V29.3654C18.4777 29.4423 18.172 29.5192 17.8471 29.5769V16.0385C17.8471 11.0769 23.4841 11.0385 23.4841 11.0385ZM6.59234 11.0385C4.58598 11.0385 3.2484 11.5769 2.35031 12.2885C1.62419 12.9231 -0.515935 15.1538 0.878969 19.3462C0.898077 16.3269 1.60508 15.25 2.38852 14.3462C4.05094 12.5192 6.30572 12.7308 6.30572 12.7308C8.96177 12.8077 10.2038 14.1346 10.7771 15.3462C11.3121 16.4038 11.2739 17.3846 11.2739 17.3846V29.3654C11.5796 29.4423 11.9044 29.5192 12.2293 29.5769V16.0577C12.2484 11.0769 6.59234 11.0385 6.59234 11.0385ZM6.15285 15.7885C6.15285 15.7885 7.16559 15.8077 8.00636 16.3462C8.99999 16.9808 10.0701 18.2692 10.0701 20.9231V28.9808C7.08916 27.9038 4.54776 25.9038 2.7898 23.3077C1.6433 21.4038 1.58598 19.9038 1.8726 18.8077C2.27387 17.4038 3.55413 15.6346 6.15285 15.7885Z"
59
+ fill={props.color}
60
+ />
61
+ </SvgIcon>
62
+ );
63
+ };
64
+
65
+ export default NSLogoHorizontal;
package/src/common/brand-components/icons/NSLogoMark.tsx ADDED
@@ -0,0 +1,36 @@
1
+ /* eslint-disable max-len */
2
+ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
3
+
4
+ const NSLogoMark = (props: SvgIconProps) => {
5
+ return (
6
+ <SvgIcon
7
+ viewBox="0 0 51 52"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ {...props}
11
+ >
12
+ <path
13
+ d="M50.041 20.6435C49.3218 18.9662 48.2764 17.4488 46.9662 16.1793C44.1811 13.5595 40.2549 12.5391 36.5481 13.472C32.8413 14.4047 29.8642 17.1622 28.6486 20.7888C28.0296 22.4814 27.7126 24.2696 27.7116 26.0719C27.7116 33.9438 27.7116 41.8201 27.7116 49.7006C27.7116 51.0214 27.7116 51.0214 26.2599 50.9554C26.2599 50.7044 26.2599 50.4271 26.2599 50.1628C26.2599 41.2608 26.2599 32.3632 26.2599 23.47C26.0387 17.9191 29.4097 12.8556 34.6136 10.9226C35.2421 10.703 35.886 10.5308 36.5405 10.4075C37.1737 10.2754 37.8602 10.2225 38.4934 10.1433C37.6885 6.45834 30.9842 2.21863 25.547 1.96768C19.7457 1.82825 14.3682 4.99786 11.677 10.1433C12.2972 10.2225 12.9044 10.2622 13.4849 10.3678C18.8789 11.2894 23.0428 15.6226 23.7525 21.0529C23.8991 22.0412 23.974 23.0388 23.9766 24.0379C23.9766 32.7288 23.9766 41.4193 23.9766 50.1101C23.9766 50.7968 23.8182 51.0875 23.0793 51.0081C22.3401 50.929 22.4194 50.7044 22.4194 50.2159C22.4194 47.4552 22.4194 44.6948 22.4194 41.9212C22.4194 36.4532 22.4194 30.9852 22.4194 25.5172C22.4658 22.3039 21.2911 19.193 19.1332 16.8132C16.5801 14.0518 12.8165 12.7501 9.10424 13.3445C5.39204 13.939 2.22225 16.3508 0.657194 19.7718C0.485803 20.102 0.340436 20.4454 0.103027 20.9341C2.27367 8.85927 12.7463 0.0553189 25.0052 0.000259583C37.2638 -0.0547998 47.8152 8.65471 50.0937 20.7095"
14
+ fill={props.color}
15
+ />
16
+ <path
17
+ d="M33.7936 49.41C33.7936 49.1591 33.7936 48.9873 33.7936 48.8157C33.7936 44.1663 33.7936 39.5703 33.7936 34.8551C33.7088 32.5992 34.5699 30.4108 36.1692 28.819C38.1948 26.8776 41.2056 26.3842 43.7444 27.5775C46.2721 28.5237 47.9495 30.9388 47.9543 33.6398C48.0301 36.4561 47.0132 39.192 45.1168 41.2738C42.3431 44.7864 38.7052 47.5172 34.5591 49.1985C34.3125 49.2868 34.0614 49.3618 33.8069 49.4231"
18
+ fill={props.color}
19
+ />
20
+ <path
21
+ d="M16.4134 49.5949C14.7636 48.7363 13.2065 48.0496 11.7681 47.1646C8.4545 45.2066 5.68241 42.4507 3.70443 39.1475C2.56468 37.3357 2.09748 35.1804 2.38472 33.0589C2.7694 29.7773 5.45008 27.2445 8.74587 27.0492C12.2156 26.5971 15.4457 28.902 16.1493 32.3324C16.3906 33.327 16.5147 34.3466 16.5188 35.3701C16.5188 39.7552 16.5188 44.1533 16.5188 48.5778C16.5188 48.8288 16.5188 49.0667 16.4397 49.5552"
22
+ fill={props.color}
23
+ />
24
+ <path
25
+ d="M20.1482 50.4005C18.8285 50.4005 18.7095 50.308 18.7095 49.1721V30.3114C18.8828 26.8698 16.8673 23.6935 13.6814 22.3867C10.1653 20.905 6.10269 21.6983 3.40106 24.3943C1.68238 26.3444 0.742587 28.8603 0.76163 31.4604C0.767026 31.7375 0.698784 32.0109 0.563576 32.253C0.418211 31.619 0.24682 30.9321 0.167472 30.351C-0.284175 27.8623 0.184929 25.2941 1.48719 23.1263C2.39143 21.5993 3.78764 20.4255 5.44632 19.798C8.97191 18.413 12.9285 18.6596 16.2551 20.4716C18.706 21.7014 20.2237 24.2401 20.1482 26.983C20.2142 34.6566 20.1482 42.3303 20.1482 49.991C20.1482 50.1495 20.1482 50.2947 20.1482 50.4402"
26
+ fill={props.color}
27
+ />
28
+ <path
29
+ d="M29.9422 50.427V49.476C29.9422 42.3969 30.0213 35.3175 29.9422 28.238C29.8629 22.5058 33.0698 20.036 37.5834 19.1246C39.8521 18.6682 42.2024 18.8418 44.3797 19.6266C48.243 21.0933 50.6295 24.9853 50.1867 29.0965C50.0944 30.1707 49.9134 31.2353 49.6456 32.2796C49.4212 30.9588 49.3288 29.6381 48.9724 28.3173C48.2014 25.4313 46.0698 23.1046 43.2638 22.0861C40.4577 21.0675 37.3314 21.4856 34.891 23.2059C32.5944 24.7671 31.2823 27.4182 31.4333 30.1928C31.4333 36.4798 31.4333 42.7667 31.4333 49.0535C31.4333 50.3743 31.4333 50.3743 29.9159 50.3743"
30
+ fill={props.color}
31
+ />
32
+ </SvgIcon>
33
+ );
34
+ };
35
+
36
+ export default NSLogoMark;
package/src/common/brand-components/icons/NSLogoPoweredBy.tsx ADDED
@@ -0,0 +1,101 @@
1
+ /* eslint-disable max-len */
2
+ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
3
+
4
+ const NSLogoPoweredBy = (props: SvgIconProps) => {
5
+ const { color } = props;
6
+ return (
7
+ <SvgIcon
8
+ viewBox="0 0 100 38"
9
+ fill="none"
10
+ xmlns="http://www.w3.org/2000/svg"
11
+ {...props}
12
+ >
13
+ <path
14
+ d="M15 8.8855V0.885498H17.7031C18.3307 0.885498 18.8438 0.998779 19.2422 1.22534C19.6432 1.4493 19.9401 1.75269 20.1328 2.1355C20.3255 2.51831 20.4219 2.94539 20.4219 3.41675C20.4219 3.8881 20.3255 4.31649 20.1328 4.7019C19.9427 5.08732 19.6484 5.39461 19.25 5.62378C18.8516 5.85034 18.3411 5.96362 17.7188 5.96362H15.7812V5.10425H17.6875C18.1172 5.10425 18.4622 5.03003 18.7227 4.88159C18.9831 4.73315 19.1719 4.53263 19.2891 4.28003C19.4089 4.02482 19.4688 3.73706 19.4688 3.41675C19.4688 3.09644 19.4089 2.80998 19.2891 2.55737C19.1719 2.30477 18.9818 2.10685 18.7188 1.96362C18.4557 1.81779 18.1068 1.74487 17.6719 1.74487H15.9688V8.8855H15Z"
15
+ fill={color}
16
+ />
17
+ <path
18
+ d="M28.7324 4.8855C28.7324 5.72925 28.5801 6.45841 28.2754 7.073C27.9707 7.68758 27.5527 8.16154 27.0215 8.49487C26.4902 8.82821 25.8835 8.99487 25.2012 8.99487C24.5189 8.99487 23.9121 8.82821 23.3809 8.49487C22.8496 8.16154 22.4316 7.68758 22.127 7.073C21.8223 6.45841 21.6699 5.72925 21.6699 4.8855C21.6699 4.04175 21.8223 3.31258 22.127 2.698C22.4316 2.08342 22.8496 1.60946 23.3809 1.27612C23.9121 0.94279 24.5189 0.776123 25.2012 0.776123C25.8835 0.776123 26.4902 0.94279 27.0215 1.27612C27.5527 1.60946 27.9707 2.08342 28.2754 2.698C28.5801 3.31258 28.7324 4.04175 28.7324 4.8855ZM27.7949 4.8855C27.7949 4.19279 27.679 3.60815 27.4473 3.13159C27.2181 2.65503 26.9069 2.29435 26.5137 2.04956C26.123 1.80477 25.6855 1.68237 25.2012 1.68237C24.7168 1.68237 24.278 1.80477 23.8848 2.04956C23.4941 2.29435 23.1829 2.65503 22.9512 3.13159C22.722 3.60815 22.6074 4.19279 22.6074 4.8855C22.6074 5.57821 22.722 6.16284 22.9512 6.6394C23.1829 7.11597 23.4941 7.47664 23.8848 7.72144C24.278 7.96623 24.7168 8.08862 25.2012 8.08862C25.6855 8.08862 26.123 7.96623 26.5137 7.72144C26.9069 7.47664 27.2181 7.11597 27.4473 6.6394C27.679 6.16284 27.7949 5.57821 27.7949 4.8855Z"
19
+ fill={color}
20
+ />
21
+ <path
22
+ d="M31.8145 8.8855L29.627 0.885498H30.6113L32.2832 7.40112H32.3613L34.0645 0.885498H35.1582L36.8613 7.40112H36.9395L38.6113 0.885498H39.5957L37.4082 8.8855H36.4082L34.6426 2.5105H34.5801L32.8145 8.8855H31.8145Z"
23
+ fill={color}
24
+ />
25
+ <path
26
+ d="M40.8027 8.8855V0.885498H45.6309V1.74487H41.7715V4.448H45.3809V5.30737H41.7715V8.02612H45.6934V8.8855H40.8027Z"
27
+ fill={color}
28
+ />
29
+ <path
30
+ d="M47.377 8.8855V0.885498H50.0801C50.7051 0.885498 51.2181 0.992269 51.6191 1.20581C52.0202 1.41675 52.3171 1.70711 52.5098 2.0769C52.7025 2.4467 52.7988 2.86727 52.7988 3.33862C52.7988 3.80998 52.7025 4.22795 52.5098 4.59253C52.3171 4.95711 52.0215 5.24357 51.623 5.4519C51.2246 5.65763 50.7155 5.7605 50.0957 5.7605H47.9082V4.8855H50.0645C50.4915 4.8855 50.8353 4.823 51.0957 4.698C51.3587 4.573 51.5488 4.39592 51.666 4.16675C51.7858 3.93498 51.8457 3.65894 51.8457 3.33862C51.8457 3.01831 51.7858 2.73836 51.666 2.49878C51.5462 2.2592 51.3548 2.0743 51.0918 1.94409C50.8288 1.81128 50.4811 1.74487 50.0488 1.74487H48.3457V8.8855H47.377ZM51.1426 5.29175L53.1113 8.8855H51.9863L50.0488 5.29175H51.1426Z"
31
+ fill={color}
32
+ />
33
+ <path
34
+ d="M54.4131 8.8855V0.885498H59.2412V1.74487H55.3818V4.448H58.9912V5.30737H55.3818V8.02612H59.3037V8.8855H54.4131Z"
35
+ fill={color}
36
+ />
37
+ <path
38
+ d="M63.4561 8.8855H60.9873V0.885498H63.5654C64.3415 0.885498 65.0055 1.04565 65.5576 1.36597C66.1097 1.68368 66.5329 2.14071 66.8271 2.73706C67.1214 3.33081 67.2686 4.04175 67.2686 4.86987C67.2686 5.70321 67.1201 6.42065 66.8232 7.02222C66.5264 7.62118 66.0941 8.08211 65.5264 8.40503C64.9587 8.72534 64.2686 8.8855 63.4561 8.8855ZM61.9561 8.02612H63.3936C64.055 8.02612 64.6032 7.89852 65.0381 7.64331C65.473 7.3881 65.7972 7.02482 66.0107 6.55347C66.2243 6.08211 66.3311 5.52092 66.3311 4.86987C66.3311 4.22404 66.2256 3.66805 66.0146 3.2019C65.8037 2.73315 65.4886 2.37378 65.0693 2.12378C64.6501 1.87118 64.1279 1.74487 63.5029 1.74487H61.9561V8.02612Z"
39
+ fill={color}
40
+ />
41
+ <path
42
+ d="M71.9873 8.8855V0.885498H74.7842C75.3415 0.885498 75.8011 0.981852 76.1631 1.17456C76.5251 1.36466 76.7946 1.62118 76.9717 1.94409C77.1488 2.2644 77.2373 2.61987 77.2373 3.0105C77.2373 3.35425 77.1761 3.6381 77.0537 3.86206C76.9339 4.08602 76.7751 4.2631 76.5771 4.39331C76.3818 4.52352 76.1696 4.61987 75.9404 4.68237V4.7605C76.1852 4.77612 76.4313 4.86206 76.6787 5.01831C76.9261 5.17456 77.1331 5.39852 77.2998 5.69019C77.4665 5.98185 77.5498 6.33862 77.5498 6.7605C77.5498 7.16154 77.4587 7.52222 77.2764 7.84253C77.0941 8.16284 76.8063 8.41675 76.4131 8.60425C76.0199 8.79175 75.5081 8.8855 74.8779 8.8855H71.9873ZM72.9561 8.02612H74.8779C75.5107 8.02612 75.96 7.90373 76.2256 7.65894C76.4938 7.41154 76.6279 7.11206 76.6279 6.7605C76.6279 6.48966 76.5589 6.23967 76.4209 6.0105C76.2829 5.77873 76.0863 5.59383 75.8311 5.45581C75.5758 5.31519 75.2738 5.24487 74.9248 5.24487H72.9561V8.02612ZM72.9561 4.40112H74.7529C75.0446 4.40112 75.3076 4.34383 75.542 4.22925C75.779 4.11467 75.9665 3.95321 76.1045 3.74487C76.2451 3.53654 76.3154 3.29175 76.3154 3.0105C76.3154 2.65894 76.193 2.36076 75.9482 2.11597C75.7034 1.86857 75.3154 1.74487 74.7842 1.74487H72.9561V4.40112Z"
43
+ fill={color}
44
+ />
45
+ <path
46
+ d="M78.4541 0.885498H79.5635L81.7822 4.61987H81.876L84.0947 0.885498H85.2041L82.3135 5.58862V8.8855H81.3447V5.58862L78.4541 0.885498Z"
47
+ fill={color}
48
+ />
49
+ <path
50
+ fill-rule="evenodd"
51
+ clip-rule="evenodd"
52
+ d="M98.8441 32.3669C98.2276 32.3669 97.7076 32.8865 97.7076 33.4781C97.7076 34.0709 98.2276 34.5892 98.8441 34.5892C99.518 34.5892 100 34.0709 100 33.4781C100 32.8496 99.518 32.3669 98.8441 32.3669ZM98.844 34.4599C98.286 34.4599 97.8221 33.9962 97.8221 33.478C97.8221 32.9421 98.286 32.4974 98.844 32.4974C99.4217 32.4974 99.8461 32.9421 99.8461 33.478C99.8461 33.9962 99.4217 34.4599 98.844 34.4599ZM99.3046 33.2195C99.3046 33.0903 99.2286 32.831 98.806 32.831H98.4385V34.1445H98.6138V33.5708H98.9019L99.1514 34.1445H99.3046L99.0743 33.5514C99.2102 33.5337 99.3046 33.3868 99.3046 33.2195ZM98.8239 33.4588H98.6138V32.9779H98.862C99.0358 32.9779 99.1699 33.0347 99.1699 33.2196C99.1699 33.3311 99.1119 33.4588 98.8239 33.4588Z"
53
+ fill={props.color}
54
+ />
55
+ <path
56
+ fill-rule="evenodd"
57
+ clip-rule="evenodd"
58
+ d="M37.9119 33.8485L28.4715 22.2537V33.6435H27.4075V19.8303L27.6589 19.7744L37.0221 31.2387V19.9796H38.1053V33.8112L37.9119 33.8485Z"
59
+ fill={props.color}
60
+ />
61
+ <path
62
+ fill-rule="evenodd"
63
+ clip-rule="evenodd"
64
+ d="M46.4815 33.8485C43.1568 33.8485 41.1619 31.9733 41.1619 28.6206V19.7744H42.2571V28.6015C42.2571 31.443 43.9194 32.8826 46.4815 32.8826C49.0435 32.8826 50.7449 31.4051 50.7449 28.6015V19.7744H51.8597V28.6206C51.8597 31.8786 49.7279 33.8485 46.4815 33.8485Z"
65
+ fill={color}
66
+ />
67
+ <path
68
+ fill-rule="evenodd"
69
+ clip-rule="evenodd"
70
+ d="M62.06 33.8485C60.5561 33.8485 59.2066 33.3652 57.9728 32.5842L58.4934 31.6733C59.6309 32.4169 60.884 32.9004 62.1562 32.9004C64.0262 32.9004 65.2795 31.7475 65.2795 30.2416C65.2795 28.6613 64.1808 27.9733 62.1757 27.0996C59.9971 26.1699 58.6669 25.2031 58.6669 23.3256C58.6669 21.3547 60.3827 19.7744 62.908 19.7744C64.1419 19.7744 65.2601 20.1648 66.0891 20.7039L65.5687 21.5778C64.8553 21.0943 63.8722 20.7225 62.8118 20.7225C60.9224 20.7225 59.7465 21.838 59.7465 23.251C59.7465 24.7198 60.9418 25.4262 62.6576 26.1887C65.0866 27.2483 66.3782 28.1594 66.3782 30.1115C66.3782 32.3426 64.4505 33.8485 62.06 33.8485Z"
71
+ fill={color}
72
+ />
73
+ <path
74
+ fill-rule="evenodd"
75
+ clip-rule="evenodd"
76
+ d="M77.2052 33.8485L70.4931 26.898V33.8485H69.4347V19.7744H70.4931V26.3217L76.9783 19.7744H78.3394L71.5141 26.6097L78.6043 33.8485H77.2052Z"
77
+ fill={color}
78
+ />
79
+ <path
80
+ fill-rule="evenodd"
81
+ clip-rule="evenodd"
82
+ d="M80.8967 33.8485H81.8901V19.7744H80.8967V33.8485Z"
83
+ fill={color}
84
+ />
85
+ <path
86
+ fill-rule="evenodd"
87
+ clip-rule="evenodd"
88
+ d="M95.9857 33.8485L86.5454 22.2537V33.6435H85.4814V19.8303L85.7331 19.7744L95.0958 31.2387V19.9796H96.1793V33.8112L95.9857 33.8485Z"
89
+ fill={color}
90
+ />
91
+ <path
92
+ fill-rule="evenodd"
93
+ clip-rule="evenodd"
94
+ d="M17.2824 21.0565C17.2824 21.0565 19.2781 20.9567 20.7785 22.6234C21.2739 23.179 21.7551 23.8912 22.024 24.8884C21.3163 19.5037 16.7162 15.33 11.1394 15.33C5.57676 15.33 0.962469 19.5037 0.240601 24.9026C0.509532 23.9055 0.990778 23.1932 1.48618 22.6376C3.00069 20.971 4.98229 21.0707 4.98229 21.0707C9.93628 21.3271 9.96459 26.3414 9.96459 26.3414V37.3955C10.1911 37.424 10.4317 37.4382 10.6723 37.4525V25.6291C10.6723 24.0194 10.1769 22.4525 9.05872 21.3414C8.03961 20.3157 6.72326 19.7459 5.33614 19.7174C5.93062 18.6775 6.75157 17.8086 7.72822 17.1961C8.76148 16.555 9.93628 16.2131 11.1394 16.2131C12.3425 16.2131 13.5315 16.555 14.5647 17.1961C15.5414 17.8086 16.3623 18.6775 16.9568 19.7174C15.5697 19.7459 14.2392 20.3157 13.2201 21.3414C12.1019 22.4525 11.5923 24.0194 11.5923 25.6291V37.424C11.833 37.4097 12.0594 37.3955 12.3 37.367V26.3271C12.3 26.3271 12.3284 21.3129 17.2824 21.0565ZM17.7353 27.0251C17.7353 27.0251 16.9852 27.0393 16.3624 27.4382C15.6122 27.9083 14.8337 28.8627 14.8337 30.8285V36.7972C17.0418 35.9995 18.9243 34.518 20.2265 32.5949C21.0899 31.1846 21.1182 30.0735 20.9059 29.2616C20.5945 28.2217 19.6462 26.9254 17.7353 27.0251ZM17.3956 23.5066C18.8818 23.5066 19.8726 23.9054 20.5379 24.4325C21.0758 24.9026 22.661 26.555 21.6136 29.6604C21.5995 27.424 21.0758 26.6262 20.4954 25.9567C19.2498 24.6035 17.5938 24.7601 17.5938 24.7601C15.6264 24.8171 14.7063 25.8 14.2817 26.6975C13.8854 27.4952 13.9137 28.2074 13.9137 28.2074V37.0821C13.6872 37.1391 13.4607 37.196 13.2201 37.2388V27.2103C13.2201 23.5351 17.3956 23.5066 17.3956 23.5066ZM4.88322 23.5066C3.39702 23.5066 2.40622 23.9054 1.74097 24.4325C1.20311 24.9026 -0.382169 26.555 0.651093 29.6604C0.665248 27.424 1.18896 26.6262 1.76928 25.9567C3.0007 24.6035 4.67091 24.7601 4.67091 24.7601C6.63835 24.8171 7.55838 25.8 7.98301 26.6975C8.37933 27.4809 8.35102 28.2074 8.35102 28.2074V37.0821C8.57749 37.1391 8.81811 37.196 9.05874 37.2388V27.2245C9.07289 23.5351 4.88322 23.5066 4.88322 23.5066ZM4.55768 27.0251C4.55768 27.0251 5.30786 27.0393 5.93065 27.4382C6.66667 27.9083 7.45931 28.8627 7.45931 30.8285V36.7972C5.25125 35.9995 3.36873 34.518 2.06653 32.5949C1.21727 31.1846 1.17481 30.0735 1.38713 29.2616C1.68437 28.2217 2.6327 26.9111 4.55768 27.0251Z"
95
+ fill={color}
96
+ />
97
+ </SvgIcon>
98
+ );
99
+ };
100
+
101
+ export default NSLogoPoweredBy;
package/src/common/brand-components/icons/NSLogoStacked.tsx ADDED
@@ -0,0 +1,55 @@
1
+ /* eslint-disable max-len */
2
+ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
3
+
4
+ const NSLogoStacked = (props: SvgIconProps) => {
5
+ return (
6
+ <SvgIcon
7
+ viewBox="0 0 155 108"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ {...props}
11
+ >
12
+ <g clip-path="url(#clip0_11117_50399)">
13
+ <path
14
+ d="M145.803 20.6435C145.084 18.9662 144.039 17.4488 142.728 16.1793C139.943 13.5595 136.017 12.5391 132.31 13.472C128.604 14.4047 125.626 17.1622 124.411 20.7888C123.792 22.4814 123.475 24.2696 123.474 26.0719C123.474 33.9438 123.474 41.8201 123.474 49.7006C123.474 51.0214 123.474 51.0214 122.022 50.9554C122.022 50.7044 122.022 50.4271 122.022 50.1628C122.022 41.2608 122.022 32.3632 122.022 23.47C121.801 17.9191 125.172 12.8556 130.376 10.9226C131.004 10.703 131.648 10.5308 132.303 10.4075C132.936 10.2754 133.622 10.2225 134.256 10.1433C133.451 6.45834 126.746 2.21863 121.309 1.96768C115.508 1.82825 110.13 4.99786 107.439 10.1433C108.059 10.2225 108.667 10.2622 109.247 10.3678C114.641 11.2894 118.805 15.6226 119.515 21.0529C119.661 22.0412 119.736 23.0388 119.739 24.0379C119.739 32.7288 119.739 41.4193 119.739 50.1101C119.739 50.7968 119.58 51.0875 118.842 51.0081C118.102 50.929 118.182 50.7044 118.182 50.2159C118.182 47.4552 118.182 44.6948 118.182 41.9212C118.182 36.4532 118.182 30.9852 118.182 25.5172C118.228 22.3039 117.053 19.193 114.895 16.8132C112.342 14.0518 108.579 12.7501 104.866 13.3445C101.154 13.939 97.9845 16.3508 96.4194 19.7718C96.248 20.102 96.1026 20.4454 95.8652 20.9341C98.0359 8.85927 108.509 0.0553189 120.767 0.000259583C133.026 -0.0547998 143.577 8.65471 145.856 20.7095"
15
+ fill={props.color}
16
+ />
17
+ <path
18
+ d="M129.556 49.41C129.556 49.1591 129.556 48.9873 129.556 48.8157C129.556 44.1663 129.556 39.5703 129.556 34.8551C129.471 32.5992 130.332 30.4108 131.931 28.819C133.957 26.8776 136.968 26.3842 139.507 27.5775C142.034 28.5237 143.712 30.9388 143.716 33.6398C143.792 36.4561 142.775 39.192 140.879 41.2738C138.105 44.7864 134.467 47.5172 130.321 49.1985C130.075 49.2868 129.824 49.3618 129.569 49.4231"
19
+ fill={props.color}
20
+ />
21
+ <path
22
+ d="M112.176 49.5949C110.526 48.7363 108.969 48.0496 107.53 47.1646C104.217 45.2066 101.445 42.4507 99.4666 39.1475C98.3269 37.3357 97.8597 35.1804 98.1469 33.0589C98.5316 29.7773 101.212 27.2445 104.508 27.0492C107.978 26.5971 111.208 28.902 111.912 32.3324C112.153 33.327 112.277 34.3466 112.281 35.3701C112.281 39.7552 112.281 44.1533 112.281 48.5778C112.281 48.8288 112.281 49.0667 112.202 49.5552"
23
+ fill={props.color}
24
+ />
25
+ <path
26
+ d="M115.91 50.4005C114.591 50.4005 114.472 50.308 114.472 49.1721V30.3114C114.645 26.8698 112.63 23.6935 109.444 22.3867C105.928 20.905 101.865 21.6983 99.1633 24.3943C97.4446 26.3444 96.5048 28.8603 96.5238 31.4604C96.5292 31.7375 96.461 32.0109 96.3258 32.253C96.1804 31.619 96.009 30.9321 95.9297 30.351C95.478 27.8623 95.9471 25.2941 97.2494 23.1263C98.1536 21.5993 99.5498 20.4255 101.209 19.798C104.734 18.413 108.691 18.6596 112.017 20.4716C114.468 21.7014 115.986 24.2401 115.91 26.983C115.976 34.6566 115.91 42.3303 115.91 49.991C115.91 50.1495 115.91 50.2947 115.91 50.4402"
27
+ fill={props.color}
28
+ />
29
+ <path
30
+ d="M125.704 50.427V49.476C125.704 42.3969 125.783 35.3175 125.704 28.238C125.625 22.5058 128.832 20.036 133.346 19.1246C135.614 18.6682 137.965 18.8418 140.142 19.6266C144.005 21.0933 146.392 24.9853 145.949 29.0965C145.856 30.1707 145.676 31.2353 145.408 32.2796C145.183 30.9588 145.091 29.6381 144.734 28.3173C143.964 25.4313 141.832 23.1046 139.026 22.0861C136.22 21.0675 133.094 21.4856 130.653 23.2059C128.356 24.7671 127.044 27.4182 127.195 30.1928C127.195 36.4798 127.195 42.7667 127.195 49.0535C127.195 50.3743 127.195 50.3743 125.678 50.3743"
31
+ fill={props.color}
32
+ />
33
+ <path
34
+ d="M27.714 93.128C27.714 86.9072 24.9822 83.6714 15.2691 79.2862C9.55475 76.6447 7.35082 74.0031 7.35082 70.8333C7.35082 66.567 10.3334 63.0141 16.1797 63.0141C19.1984 63.0878 22.1225 64.0833 24.5599 65.8672L26.843 61.5482C23.781 59.4956 20.1818 58.393 16.4964 58.3784C7.91831 58.3784 2.21712 64.3746 2.21712 71.0843C2.21712 76.6711 5.1997 80.3297 13.2631 83.8562C20.8779 87.2242 22.5011 89.6412 22.5011 93.7093C22.5011 97.7771 19.7034 101.845 13.7383 101.845C9.66038 101.629 5.74215 100.188 2.49426 97.711L0 102.162C3.94083 104.954 8.64596 106.462 13.4743 106.481C21.5378 106.481 27.6876 100.696 27.6876 93.128H27.714ZM71.951 105.715L49.3309 81.7563L70.9214 59.0915H64.5076L44.2501 80.8052V59.0915H39.1693V105.715H44.2501V82.8655L65.2731 105.715H71.951ZM89.5955 59.0915H84.462V105.715H89.5428L89.5955 59.0915ZM141.408 106.376V59.0915H136.327V93.8942L106.475 58.2329L105.458 58.4839V105.715H110.539V70.3842L140.774 106.639L141.408 106.376Z"
35
+ fill={props.color}
36
+ />
37
+ <path
38
+ d="M39.4206 50.1894V2.91866H34.3131V37.6684L4.47444 2.00732L3.45825 2.25827V49.4893H8.53915V14.1849L38.7607 50.414L39.4206 50.1894ZM85.0167 32.7814V2.91866H79.9359V32.3983C79.9359 41.6438 74.6571 45.6855 67.425 45.6855C60.1929 45.6855 55.0461 41.7232 55.0461 32.3983V2.91866H49.965V32.7814C49.965 43.9686 56.7616 50.2555 67.425 50.2555C77.8373 50.2555 85.0167 43.5856 85.0167 32.7814Z"
39
+ fill={props.color}
40
+ />
41
+ <path
42
+ d="M150.431 107.7C152.737 107.7 154.569 105.785 154.569 103.5C154.569 101.162 152.737 99.2468 150.431 99.2468C148.124 99.2468 146.318 101.136 146.318 103.5C146.318 105.811 148.15 107.7 150.431 107.7ZM150.431 107.119C148.52 107.119 146.977 105.441 146.977 103.513C146.977 101.492 148.52 99.8808 150.431 99.8808C152.368 99.8808 153.91 101.505 153.91 103.513C153.91 105.455 152.368 107.119 150.431 107.119ZM149.811 102.007C149.93 101.981 150.128 101.981 150.299 101.981C150.866 101.981 151.208 102.258 151.208 102.668C151.208 103.183 150.866 103.473 150.246 103.473C150.128 103.473 149.969 103.473 149.798 103.447V102.007H149.811ZM149.126 105.521H149.811V104.028C149.983 104.055 150.101 104.055 150.18 104.055C150.233 104.055 150.378 104.055 150.497 104.028L151.406 105.521H152.21L151.156 103.87C151.617 103.672 151.907 103.183 151.907 102.641C151.907 101.955 151.367 101.36 150.22 101.36C149.798 101.36 149.455 101.387 149.126 101.439V105.521Z"
43
+ fill={props.color}
44
+ />
45
+ </g>
46
+ <defs>
47
+ <clipPath id="clip0_11117_50399">
48
+ <rect width="155" height="108" fill="white" />
49
+ </clipPath>
50
+ </defs>
51
+ </SvgIcon>
52
+ );
53
+ };
54
+
55
+ export default NSLogoStacked;
package/src/common/brand-components/icons/NSWordMark.tsx ADDED
@@ -0,0 +1,58 @@
1
+ /* eslint-disable max-len */
2
+ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
3
+
4
+ const NSLogoWordMark = (props: SvgIconProps) => {
5
+ return (
6
+ <SvgIcon
7
+ viewBox="0 0 98 20"
8
+ fill="none"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ {...props}
11
+ >
12
+ <path
13
+ fill-rule="evenodd"
14
+ clip-rule="evenodd"
15
+ d="M96.4395 17C95.6072 17 94.9053 17.7014 94.9053 18.5C94.9053 19.3004 95.6072 20 96.4395 20C97.3493 20 98 19.3004 98 18.5C98 17.6516 97.3493 17 96.4395 17ZM96.4393 19.8255C95.686 19.8255 95.0598 19.1996 95.0598 18.5C95.0598 17.7765 95.686 17.1762 96.4393 17.1762C97.2193 17.1762 97.7922 17.7765 97.7922 18.5C97.7922 19.1996 97.2193 19.8255 96.4393 19.8255ZM97.0612 18.151C97.0612 17.9766 96.9586 17.6265 96.388 17.6265H95.892V19.3997H96.1287V18.6252H96.5176L96.8544 19.3997H97.0612L96.7503 18.599C96.9337 18.5751 97.0612 18.3768 97.0612 18.151ZM96.4123 18.474H96.1286V17.8248H96.4637C96.6983 17.8248 96.8794 17.9014 96.8794 18.151C96.8794 18.3016 96.8011 18.474 96.4123 18.474Z"
16
+ fill={props.color}
17
+ />
18
+ <path
19
+ fill-rule="evenodd"
20
+ clip-rule="evenodd"
21
+ d="M14.181 19L1.43645 3.34704V18.7232H0V0.0754862L0.339466 0L12.9798 15.4768V0.277025H14.4421V18.9497L14.181 19Z"
22
+ fill={props.color}
23
+ />
24
+ <path
25
+ fill-rule="evenodd"
26
+ clip-rule="evenodd"
27
+ d="M25.7499 19C21.2617 19 18.5685 16.4685 18.5685 11.9423V0H20.0471V11.9165C20.0471 15.7525 22.2912 17.696 25.7499 17.696C29.2087 17.696 31.5056 15.7014 31.5056 11.9165V0H33.0106V11.9423C33.0106 16.3406 30.1326 19 25.7499 19Z"
28
+ fill={props.color}
29
+ />
30
+ <path
31
+ fill-rule="evenodd"
32
+ clip-rule="evenodd"
33
+ d="M46.781 19C44.7507 19 42.9289 18.3475 41.2632 17.2933L41.966 16.0636C43.5016 17.0674 45.1934 17.7201 46.9109 17.7201C49.4353 17.7201 51.1273 16.1637 51.1273 14.1307C51.1273 11.9973 49.644 11.0685 46.9371 9.889C43.9961 8.63396 42.2002 7.32873 42.2002 4.79404C42.2002 2.13339 44.5165 0 47.9257 0C49.5914 0 51.101 0.527014 52.2202 1.2548L51.5176 2.43455C50.5545 1.78181 49.2274 1.27989 47.7959 1.27989C45.2452 1.27989 43.6578 2.78589 43.6578 4.69342C43.6578 6.67624 45.2714 7.62988 47.5877 8.6593C50.8668 10.0898 52.6106 11.3197 52.6106 13.955C52.6106 16.967 50.008 19 46.781 19Z"
34
+ fill={props.color}
35
+ />
36
+ <path
37
+ fill-rule="evenodd"
38
+ clip-rule="evenodd"
39
+ d="M67.227 19L58.1657 9.61689V19H56.7368V0H58.1657V8.83886L66.9207 0H68.7582L59.5441 9.22763L69.1158 19H67.227Z"
40
+ fill={props.color}
41
+ />
42
+ <path
43
+ fill-rule="evenodd"
44
+ clip-rule="evenodd"
45
+ d="M72.2106 19H73.5516V0H72.2106V19Z"
46
+ fill={props.color}
47
+ />
48
+ <path
49
+ fill-rule="evenodd"
50
+ clip-rule="evenodd"
51
+ d="M92.5808 19L79.8364 3.34704V18.7232H78.4V0.0754862L78.7397 0L91.3794 15.4768V0.277025H92.8421V18.9497L92.5808 19Z"
52
+ fill={props.color}
53
+ />
54
+ </SvgIcon>
55
+ );
56
+ };
57
+
58
+ export default NSLogoWordMark;
package/src/common/brand-components/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { BrandComponent as default } from './BrandComponent';
2
+ export type { BrandComponentProps } from './types';
package/src/common/brand-components/types.d.ts ADDED
@@ -0,0 +1,9 @@
1
+
2
+ export type BrandComponentProps = {
3
+ variant?: 'stacked' | 'horizontal' | 'poweredBy' | 'logomark' | 'wordmark';
4
+ size?: string;
5
+ }
6
+
7
+ export type SVGLogoProps = {
8
+ color: string;
9
+ }
package/src/common/index.ts CHANGED
@@ -1,2 +1,6 @@
1
1
  export { default as Button } from './button';
2
- export type { ButtonProps } from './button';
2
+ export type { ButtonProps } from './button';
3
+ export { default as BrandComponent } from './brand-components';
4
+ export type { BrandComponentProps } from './brand-components';
5
+ export { default as Typography } from './typography';
6
+ export type { TypographyProps } from './typography';
package/src/common/typography/Typography.stories.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React from "react";
2
+ import { ComponentStory, ComponentMeta } from "@storybook/react";
3
+ import { Typography as TypoComponent } from "./Typography";
4
+
5
+ export default {
6
+ title: "Components/Typography",
7
+ component: TypoComponent,
8
+ decorators: [
9
+ (story) => (
10
+ <div style={{ textAlign: "center", marginTop: "20px" }}>{story()}</div>
11
+ ),
12
+ ],
13
+ argTypes: {
14
+ children: {
15
+ control: "text",
16
+ name: "Children/Text",
17
+ defaultValue: "Typography",
18
+ },
19
+
20
+ },
21
+ args: {
22
+ children: "Typography",
23
+ color: "primary",
24
+ },
25
+ } as ComponentMeta<typeof TypoComponent>;
26
+
27
+ export const Typography: ComponentStory<typeof TypoComponent> = (args) => <TypoComponent {...args} />;
package/src/common/typography/Typography.styled.tsx ADDED
@@ -0,0 +1,45 @@
1
+ /* eslint-disable max-len */
2
+ import { styled } from "@nuskin/foundation-theme";
3
+ import { TypographyProps, Variants } from "./types";
4
+
5
+ const getStyleSizes = (style: Variants) => {
6
+ switch (style) {
7
+ case "h1":
8
+ return "font-size: 36px; line-height: 44px;";
9
+ case "h2":
10
+ return "font-size: 26px; line-height: 32px";
11
+ case "h3":
12
+ return "font-size: 22px; line-height: 28px";
13
+ case "h4":
14
+ return "font-size: 18px; line-height: 26px";
15
+ case "h5":
16
+ return "font-size: 16px; line-height: 22px";
17
+ case "h6":
18
+ return "font-size: 14px; line-height: 20px";
19
+ case "sub-h-l":
20
+ return "font-size: 18px; line-height: 22px; text-transform: uppercase; letter-spacing: 0.05em;";
21
+ case "sub-h-m":
22
+ return "font-size: 16px; line-height: 20px; text-transform: uppercase; letter-spacing: 0.05em;";
23
+ case "sub-h-s":
24
+ return "font-size: 14px; line-height: 18px; text-transform: uppercase; letter-spacing: 0.05em;";
25
+ case "p-l":
26
+ return "font-size: 18px; line-height: 24px";
27
+ case "p-m":
28
+ return "font-size: 16px; line-height: 22px";
29
+ case "p-s":
30
+ return "font-size: 14px; line-height: 20px";
31
+ case "p-xs":
32
+ return "font-size: 11px; line-height: 16px";
33
+ }
34
+ };
35
+
36
+ export const StyledTypography = styled.div<TypographyProps>`
37
+ @import url("https://fonts.googleapis.com/css2?family=Inter");
38
+
39
+ font-family: "Inter";
40
+ color: ${({ color = "primary", theme }) => theme?.palette?.[color].main};
41
+ font-weight: ${({ weight }) => (weight === "normal" ? "400" : "600")};
42
+ font-style: ${({ fontStyle }) => fontStyle};
43
+ ${({ variant = "h1" }) => getStyleSizes(variant)};
44
+ text-decoration-line: ${({ decoration }) => decoration};
45
+ `;
package/src/common/typography/Typography.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import React, { FC, PropsWithChildren } from "react";
2
+ import { TypographyProps } from "./types";
3
+ import { StyledTypography } from "./Typography.styled";
4
+
5
+ export const Typography: FC<PropsWithChildren<TypographyProps>> = ({
6
+ children,
7
+ fontStyle = "normal",
8
+ weight = "normal",
9
+ variant = "p-l",
10
+ decoration = "none",
11
+ color = "primary",
12
+ }) => {
13
+ return (
14
+ <StyledTypography
15
+ fontStyle={fontStyle}
16
+ weight={weight}
17
+ variant={variant}
18
+ decoration={decoration}
19
+ color={color}
20
+ >
21
+ {children}
22
+ </StyledTypography>
23
+ );
24
+ };
25
+
package/src/common/typography/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Typography as default } from './Typography';
2
+ export type { TypographyProps } from './types';
package/src/common/typography/types.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { ColorKeys } from "@nuskin/foundation-theme/src/themes/types";
2
+
3
+ export type Variants =
4
+ | "h1"
5
+ | "h2"
6
+ | "h3"
7
+ | "h4"
8
+ | "h5"
9
+ | "h6"
10
+ | "sub-h-l"
11
+ | "sub-h-m"
12
+ | "sub-h-s"
13
+ | "p-l"
14
+ | "p-m"
15
+ | "p-s"
16
+ | "p-xs"
17
+ | "CTA";
18
+
19
+ export type TypographyProps = {
20
+ variant: Variants;
21
+ decoration?: "underline" | "none";
22
+ fontStyle?: "italic" | "normal";
23
+ weight?: "bold" | "normal";
24
+ color?: ColorKeys;
25
+ };
package/src/common/Icons/Logo.tsx DELETED
@@ -1,28 +0,0 @@
1
- /* eslint-disable max-len */
2
- import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
3
-
4
- const LogoIcon = (props: SvgIconProps) => {
5
- return (
6
- <SvgIcon viewBox="0 0 155 108" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
7
- <g clip-path="url(#clip0_11117_50399)">
8
- <path d="M145.803 20.6435C145.084 18.9662 144.039 17.4488 142.728 16.1793C139.943 13.5595 136.017 12.5391 132.31 13.472C128.604 14.4047 125.626 17.1622 124.411 20.7888C123.792 22.4814 123.475 24.2696 123.474 26.0719C123.474 33.9438 123.474 41.8201 123.474 49.7006C123.474 51.0214 123.474 51.0214 122.022 50.9554C122.022 50.7044 122.022 50.4271 122.022 50.1628C122.022 41.2608 122.022 32.3632 122.022 23.47C121.801 17.9191 125.172 12.8556 130.376 10.9226C131.004 10.703 131.648 10.5308 132.303 10.4075C132.936 10.2754 133.622 10.2225 134.256 10.1433C133.451 6.45834 126.746 2.21863 121.309 1.96768C115.508 1.82825 110.13 4.99786 107.439 10.1433C108.059 10.2225 108.667 10.2622 109.247 10.3678C114.641 11.2894 118.805 15.6226 119.515 21.0529C119.661 22.0412 119.736 23.0388 119.739 24.0379C119.739 32.7288 119.739 41.4193 119.739 50.1101C119.739 50.7968 119.58 51.0875 118.842 51.0081C118.102 50.929 118.182 50.7044 118.182 50.2159C118.182 47.4552 118.182 44.6948 118.182 41.9212C118.182 36.4532 118.182 30.9852 118.182 25.5172C118.228 22.3039 117.053 19.193 114.895 16.8132C112.342 14.0518 108.579 12.7501 104.866 13.3445C101.154 13.939 97.9845 16.3508 96.4194 19.7718C96.248 20.102 96.1026 20.4454 95.8652 20.9341C98.0359 8.85927 108.509 0.0553189 120.767 0.000259583C133.026 -0.0547998 143.577 8.65471 145.856 20.7095" fill="#252525" />
9
- <path d="M129.556 49.41C129.556 49.1591 129.556 48.9873 129.556 48.8157C129.556 44.1663 129.556 39.5703 129.556 34.8551C129.471 32.5992 130.332 30.4108 131.931 28.819C133.957 26.8776 136.968 26.3842 139.507 27.5775C142.034 28.5237 143.712 30.9388 143.716 33.6398C143.792 36.4561 142.775 39.192 140.879 41.2738C138.105 44.7864 134.467 47.5172 130.321 49.1985C130.075 49.2868 129.824 49.3618 129.569 49.4231" fill="#252525" />
10
- <path d="M112.176 49.5949C110.526 48.7363 108.969 48.0496 107.53 47.1646C104.217 45.2066 101.445 42.4507 99.4666 39.1475C98.3269 37.3357 97.8597 35.1804 98.1469 33.0589C98.5316 29.7773 101.212 27.2445 104.508 27.0492C107.978 26.5971 111.208 28.902 111.912 32.3324C112.153 33.327 112.277 34.3466 112.281 35.3701C112.281 39.7552 112.281 44.1533 112.281 48.5778C112.281 48.8288 112.281 49.0667 112.202 49.5552" fill="#252525" />
11
- <path d="M115.91 50.4005C114.591 50.4005 114.472 50.308 114.472 49.1721V30.3114C114.645 26.8698 112.63 23.6935 109.444 22.3867C105.928 20.905 101.865 21.6983 99.1633 24.3943C97.4446 26.3444 96.5048 28.8603 96.5238 31.4604C96.5292 31.7375 96.461 32.0109 96.3258 32.253C96.1804 31.619 96.009 30.9321 95.9297 30.351C95.478 27.8623 95.9471 25.2941 97.2494 23.1263C98.1536 21.5993 99.5498 20.4255 101.209 19.798C104.734 18.413 108.691 18.6596 112.017 20.4716C114.468 21.7014 115.986 24.2401 115.91 26.983C115.976 34.6566 115.91 42.3303 115.91 49.991C115.91 50.1495 115.91 50.2947 115.91 50.4402" fill="#252525" />
12
- <path d="M125.704 50.427V49.476C125.704 42.3969 125.783 35.3175 125.704 28.238C125.625 22.5058 128.832 20.036 133.346 19.1246C135.614 18.6682 137.965 18.8418 140.142 19.6266C144.005 21.0933 146.392 24.9853 145.949 29.0965C145.856 30.1707 145.676 31.2353 145.408 32.2796C145.183 30.9588 145.091 29.6381 144.734 28.3173C143.964 25.4313 141.832 23.1046 139.026 22.0861C136.22 21.0675 133.094 21.4856 130.653 23.2059C128.356 24.7671 127.044 27.4182 127.195 30.1928C127.195 36.4798 127.195 42.7667 127.195 49.0535C127.195 50.3743 127.195 50.3743 125.678 50.3743" fill="#252525" />
13
- <path d="M27.714 93.128C27.714 86.9072 24.9822 83.6714 15.2691 79.2862C9.55475 76.6447 7.35082 74.0031 7.35082 70.8333C7.35082 66.567 10.3334 63.0141 16.1797 63.0141C19.1984 63.0878 22.1225 64.0833 24.5599 65.8672L26.843 61.5482C23.781 59.4956 20.1818 58.393 16.4964 58.3784C7.91831 58.3784 2.21712 64.3746 2.21712 71.0843C2.21712 76.6711 5.1997 80.3297 13.2631 83.8562C20.8779 87.2242 22.5011 89.6412 22.5011 93.7093C22.5011 97.7771 19.7034 101.845 13.7383 101.845C9.66038 101.629 5.74215 100.188 2.49426 97.711L0 102.162C3.94083 104.954 8.64596 106.462 13.4743 106.481C21.5378 106.481 27.6876 100.696 27.6876 93.128H27.714ZM71.951 105.715L49.3309 81.7563L70.9214 59.0915H64.5076L44.2501 80.8052V59.0915H39.1693V105.715H44.2501V82.8655L65.2731 105.715H71.951ZM89.5955 59.0915H84.462V105.715H89.5428L89.5955 59.0915ZM141.408 106.376V59.0915H136.327V93.8942L106.475 58.2329L105.458 58.4839V105.715H110.539V70.3842L140.774 106.639L141.408 106.376Z" fill="#252525" />
14
- <path d="M39.4206 50.1894V2.91866H34.3131V37.6684L4.47444 2.00732L3.45825 2.25827V49.4893H8.53915V14.1849L38.7607 50.414L39.4206 50.1894ZM85.0167 32.7814V2.91866H79.9359V32.3983C79.9359 41.6438 74.6571 45.6855 67.425 45.6855C60.1929 45.6855 55.0461 41.7232 55.0461 32.3983V2.91866H49.965V32.7814C49.965 43.9686 56.7616 50.2555 67.425 50.2555C77.8373 50.2555 85.0167 43.5856 85.0167 32.7814Z" fill="#252525" />
15
- <path d="M150.431 107.7C152.737 107.7 154.569 105.785 154.569 103.5C154.569 101.162 152.737 99.2468 150.431 99.2468C148.124 99.2468 146.318 101.136 146.318 103.5C146.318 105.811 148.15 107.7 150.431 107.7ZM150.431 107.119C148.52 107.119 146.977 105.441 146.977 103.513C146.977 101.492 148.52 99.8808 150.431 99.8808C152.368 99.8808 153.91 101.505 153.91 103.513C153.91 105.455 152.368 107.119 150.431 107.119ZM149.811 102.007C149.93 101.981 150.128 101.981 150.299 101.981C150.866 101.981 151.208 102.258 151.208 102.668C151.208 103.183 150.866 103.473 150.246 103.473C150.128 103.473 149.969 103.473 149.798 103.447V102.007H149.811ZM149.126 105.521H149.811V104.028C149.983 104.055 150.101 104.055 150.18 104.055C150.233 104.055 150.378 104.055 150.497 104.028L151.406 105.521H152.21L151.156 103.87C151.617 103.672 151.907 103.183 151.907 102.641C151.907 101.955 151.367 101.36 150.22 101.36C149.798 101.36 149.455 101.387 149.126 101.439V105.521Z" fill="#252525" />
16
- </g>
17
- <defs>
18
- <clipPath id="clip0_11117_50399">
19
- <rect width="200px" height="200px" fill="white" />
20
- </clipPath>
21
- </defs>
22
- </SvgIcon>
23
-
24
- );
25
- }
26
-
27
- export default LogoIcon;
28
-