@egov3/system-design 1.0.0

package/src/stories/components/Button.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { Button } from "~baseComponents";
+
+const meta = {
+  title: "baseComponents/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    onClick: fn(),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const IsRounded: Story = {
+  args: {
+    isRounded: true,
+    size: "large",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const NotRounded: Story = {
+  args: {
+    isRounded: false,
+    size: "large",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "medium",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const Mini: Story = {
+  args: {
+    size: "mini",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const VariantDefault: Story = {
+  args: {
+    variant: "default",
+    size: "large",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const VariantTinted: Story = {
+  args: {
+    variant: "tinted",
+    size: "large",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const VariantSecondary: Story = {
+  args: {
+    variant: "secondary",
+    size: "large",
+    children: "Button",
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const VariantDefaultDisabled: Story = {
+  args: {
+    variant: "default",
+    size: "large",
+    children: "Button",
+    disabled: true,
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const VariantTintedDisabled: Story = {
+  args: {
+    variant: "tinted",
+    size: "large",
+    children: "Button",
+    disabled: true,
+    ariaLabel: "Кпнока",
+  },
+};
+
+export const VariantSecondaryDisabled: Story = {
+  args: {
+    variant: "secondary",
+    size: "large",
+    children: "Button",
+    disabled: true,
+    ariaLabel: "Кпнока",
+  },
+};

package/src/styles/colors.module.scss

@@ -0,0 +1,42 @@
+$default-primary-accent: #0581da;
+$default-white-color: #fff;
+
+// Surface Colors
+$Surface-Surface-3-color: #e3e7eb;
+$Surface-Surface-2: #fff;
+$Surface-Surface-1: #f0f2f4;
+$Surface-Surface-White---Nonconvert: #fff;
+$Surface-Surface-Alt: rgba(240, 242, 244, 0.8);
+$Surface-Surface-BlackOpacity: rgba(0, 0, 0, 0.24);
+
+// Text Colors
+$Text-Accent: #0581da;
+$Text-Primary: #000;
+$Text-White-nonconvert-color: #ffffff;
+$Text-Disabled-color: #929daa;
+$Text-Disabled-Accent-color: #9bcdf0;
+$Text-Secondary: #758393;
+
+// Icons Colors
+$icon-error-color: #f35929;
+$icon-warning-color: #f3a229;
+$icon-accent-color: #0581da;
+$icon-secondary-color: #758393;
+$Icon-Success: #57bb09;
+
+// Buttons Colors
+$Button-Primary-Default: #0581da; // TODO
+$button-tinted-default-color: #e1f0fb;
+$button-tinted-on-hover-color: #b2d9f5;
+$button-primary-on-hover-color: #1a9cfa;
+$button-secondary-on-hover: #c5ccd3;
+$button-disabled-default-color: #c5ccd3;
+$button-secondary-default-color: #e6e9ec;
+$button-alternative-default-color: rgba(170, 170, 170, 0.64);
+
+// Page Color
+$Page-Color-Background-Gray: #f0f2f4;
+$Page-Color-Background-White: #fff;
+
+// General lightmode colors
+$Leaf: #c1dc19;

package/src/styles/globals.scss

@@ -0,0 +1,43 @@
+@import '/src/styles/colors.module';
+
+:root {
+  --default-primary-accent-color: #0581da;
+  --default-black-color: #000;
+  --default-white-color: #fff;
+  --default-secondary-grey-color: #758393;
+  --background-color: #f0f2f4;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+  background-color: #f0f2f4;
+  font-family: 'Inter', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: $default-primary-accent;
+}
+
+ul {
+  list-style: none;
+  list-style-type: none;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/Inter-Regular.ttf');
+  font-display: swap;
+}
+
+fieldset,
+button {
+  border: none;
+  background: inherit;
+}

package/src/styles/structure.module.scss

@@ -0,0 +1,60 @@
+@import '/src/styles/typography.module';
+@import '/src/styles/colors.module';
+
+.authBtn {
+  display: flex;
+  padding: 14px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+
+  border-radius: 12px;
+  background: var(--default-primary-accent-color, #0581da);
+
+  line-height: 16px;
+
+  text-transform: none;
+  box-shadow: none;
+}
+
+.serviceBodyContainer {
+  display: grid;
+  grid-template-areas: 'serviceBody1 serviceBody2';
+  grid-template-columns: 2fr 282px;
+
+  margin-bottom: 32px;
+}
+
+.serviceBody1 {
+  grid-area: serviceBody1;
+  margin-right: 32px;
+}
+
+.serviceBodyItem {
+  border-radius: 12px;
+  background: var(--default-white-color, #fff);
+  height: fit-content;
+}
+
+.updAndDownloadBtn {
+  width: 100%;
+}
+
+.stepWrapper {
+  padding: 16px;
+  border-bottom: 1px solid #f0f2f4;
+}
+
+.serviceStatusLabel {
+  display: block;
+  color: $icon-secondary-color;
+  padding: 12px 16px;
+  @include bodyMedium;
+}
+
+.serviceContainerStepTitle {
+  color: var(--default-primary-accent-color, #0581da);
+  margin-bottom: 16px;
+  @include subtitles3;
+}

package/src/styles/typography.module.scss

@@ -0,0 +1,120 @@
+/* Headings/Heading 1 */
+@mixin heading1 {
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 36px; /* 112.5% */
+  letter-spacing: -0.32px;
+}
+
+/* Headings/Heading 3 */
+@mixin heading3 {
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px; /* 116.667% */
+  letter-spacing: -0.24px;
+}
+
+/* Subtitles/Subtitle 3 */
+@mixin subtitles3 {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+/* Body/Body 1, Medium */
+@mixin bodyMedium {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+}
+
+/* Body/Body 1, Regular */
+@mixin Body1Regular {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+}
+
+/* Body/Body 2, Medium */
+@mixin body2Medium {
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+}
+
+/* Body/Body 2, Regular */
+@mixin body2Regular {
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+
+/* Body/Body 3, Regular */
+@mixin body3Regular {
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 114.286% */
+}
+
+/* Caption/Caption 1, Medium */
+@mixin caption1Medium {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+}
+
+/* Caption/Caption 1, Regular */
+@mixin caption1Regular {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+}
+
+/* Caption/Caption 1, Semibold */
+@mixin caption1Semibold {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px; /* 133.333% */
+}
+
+/* Caption/Caption 2, Medium */
+@mixin caption2Medium {
+  font-family: Inter;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 12px; /* 120% */
+}
+
+/* Caption/Caption 2, Regular */
+@mixin caption2Regular {
+  font-family: Inter;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 12px; /* 120% */
+}
+
+$borderRadius: 4px;

package/src/utils/ClassNamesFn.tsx

@@ -0,0 +1,2 @@
+export const ClassNamesFn = (...args: unknown[]) =>
+  args.filter((item) => !!item).join(' ');

package/tsconfig.json

@@ -0,0 +1,54 @@
+{
+  "compilerOptions": {
+    "types": ["@types/react", "@types/react-dom"],
+    "baseUrl": "./",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "~utils/*": ["./src/utils/*"],
+      "~baseComponents": ["./src/baseComponents/index"]
+
+      // "react": ["./node_modules/@types/react"],
+      // "~app/*": ["./src/app/*"],
+      // "~assets/*": ["./src/assets/*"],
+      // "~components": ["./src/components/index"],
+      // "~module": ["./src/module/index"],
+      // "~constants/*": ["./src/constants/*"],
+      // "~customHooks/*": ["./src/customHooks/*"],
+      // "~interfaces/*": ["./src/interfaces/*"],
+      // "~services/*": ["./src/services/*"],
+      // "~store": ["./src/store/index"],
+      // "~stories/*": ["./src/stories/*"],
+      // "~styles/*": ["./src/styles/*"],
+      // "~svg": ["./src/svg/index"],
+      // "~templates": ["./src/templates/index"],
+      // "~new/*": ["./src/new/*"],
+      // "~customMock/*": ["./__tests__/customMock/*"],
+      // "~responses/*": ["./__tests__/responses/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.css",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}